<template>
  <div>
    <p>{{ $route.params.id }}</p>
    <ul>
      <li>{{ detail.title }}</li>
      <li>{{ detail.content }}</li>
    </ul>

  </div>
</template>

<script>
const messageDetails = [
  {id: 1, title: 'Message001', content: 'message content00111....'},
  {id: 3, title: 'Message003', content: 'message content00222....'},
  {id: 5, title: 'Message005', content: 'message content00333....'}
]
export default {
  name: "MessagesDetail",
  data() {
    return {
      detail: {}
    }
  },
  mounted() {
    const id = this.$route.params.id/1
    this.detail = messageDetails.find(detail => detail.id === id)
  },
  watch: {
    $route() {
      console.log(this.$route.params)
      const id = this.$route.params.id/1
      this.detail = messageDetails.find(detail => detail.id === id)
    }
  }
}
</script>

<style scoped>

</style>
